<section>
    <div class="main-case-study">
        <h1 class="title" style="text-align: center;">{{ .Params.case_title }}</h1>
        <h2 class="subtitle" style="text-align: center;">{{ .Params.case_subtitle }}</h2>
        <img src="img/{{ .Params.case_feature_img }}" alt="">
        <p class="summary">{{ .Params.case_summary }}</p>
        <div class="case-details">
            <div class="case-details-item">
                <p><strong>Team</strong>
                    {{ range .Params.team }}
                    <br>{{ . }}
                    {{end}}
                </p>
            </div>
            <div class="case-details-item">
                <p><strong>My Role</strong>
                    {{ range .Params.roles }}
                    <br>{{ . }}
                    {{ end }}
                </p>
            </div>
            <div class="case-details-item">
                <p><strong>Methods</strong>
                    {{ range .Params.methods }}
                    <br>{{ . }}
                    {{ end }}
                </p>
            </div>
        </div>
        <h1 style="color: black; font-family: merriweather; font-size: 26px; line-height: 1.7em; margin-top: 20px;">{{ .Description }}</h1>
        <div class="case-links">
            {{ $baseUrl := .Site.BaseURL }}
            {{ range $element := .Params.button_links }}
            <div class="link-div">
                <a href="{{ $element.link }}" target="blank" class="case-detail-link">
                    {{ if eq $element.img "download.svg" }}
                    <img style="top:1.8px;" src="{{ $baseUrl }}svg/{{ $element.img }}">
                    {{ else }}
                    <img src="{{ $baseUrl }}svg/{{ $element.img }}">
                    {{ end }}
                    {{ $element.text }}
                </a>
            </div>
            {{ end }}
        </div>
    </div>
</section>